今天要來學習CSS的動畫效果

1.CSS動畫的種類
使用CSS可以表現兩種動畫效果，包括「轉場動畫」與「關鍵影格動畫」。

(一)轉場動畫
1.定義起點與終點的兩個狀態
2.需要啟動動畫的觸發器
3.只會播放一次

(二)關鍵影格動畫
1.在起點與終點之間建立多個關鍵影格
2.即使沒有觸發器，也可以開始播放影片
3.可以設定迴圈次數與播放方法

2.使用CSS屬性製作轉場動畫
(一)與套用轉場效果有關的屬性
1.transition-property:~;:這是設定套用效果的CSS屬性，在值輸入任意屬性名稱或all。
2.transition-duration:~;:這是設定效果所需時間的屬性，在值輸入秒數或毫秒數。
3.transition-delay:~;:這是設定效果開始為止的延遲時間的屬性，在值輸入秒數或毫秒數。
4.transition-timing-function:~;:這是設定變化方式的屬性，在值設定關鍵字或函數型的值。

(二)在表單的「Send」按鈕上加上動畫效果
針對「滑鼠移入按鈕」的選擇器，要設定為input[type="submit"]:hover，包含屬性選擇器與虛擬類別的組合，接著設定動畫的狀態(要改變背景色、往右偏移)，接著把要套用transitsion的CSS屬性名稱(background-color與margin-left)設定為transition-property，同時也要設定其他三個transition相關屬性。

input[type="submit"]:hover{
    background-color: #c7887f;      (1)改變背景色
margin-left: 20px;                  (2)往右偏移
transition-property: background-color,margin-left;  以(1)背景色與(2)往右偏移為對象
transition-duration: 300ms;              0.3秒之內
transition-timing-function: ease-in;     開始時緩慢，結束時快速
transition-delay: 0ms;                   沒有延遲
} 

(三)轉場動畫的設定方式
簡寫的寫法：
transition: all 300ms ease-in 100ms;

1.all:transition-property 哪個屬性會被轉場影響
2.300ms:transition-duration 花多少時間轉場
3.ease-in:transition-timing-function 如何轉場
4.100ms:transition-delay 延遲多久後開始

transition-timing-function的關鍵字

1.ease:慢慢開始
2.liner:以一定速度變化
3.ease-in:慢慢開始，快速結束
4.ease-out:快速開始，慢慢結束
5.ease-in-out:慢慢開始，中間加速，再慢慢結束

今天先到這邊明天再繼續！